<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 创建一个根标签  -->
    <div id="root"></div>

    <!-- 2. 引入react库文件 
    注意: 先引入react后引入react-dom. 因为react-dom依赖react
    -->
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>

    <!-- 3. 根据数据动态创建元素,最后渲染到页面上 -->
    <script>
      // react.js中提供了React对象
      //React.createElement 返回值是一个虚拟dom. 因为不是真正的dom对象,只是一个普通的对象.用来描述未来要创建的真实dom对象是什么样子的.所以人为起了名字叫虚拟dom
      //   React.createElement('标签名', {属性: 值, 属性: 值}, 子节点,子节点,...)
      const h1 = React.createElement('h1', { id: 'title' }, 'hj,lsp')
      //   console.log(h1)
      // react-dom.js 提供了ReactDOM对象
      // ReactDOM.render函数,可以帮我们自动根据虚拟dom,创建真实dom.并且添加到根标签,从而渲染页面
      ReactDOM.render(h1, document.getElementById('root'))
    </script>
  </body>
</html>
